<template>
  <div class="background">
    <div class="login">
      <el-card class="box-card">
        <div slot="header" class="clearfix">

          <span style="display: inline-block;font-width: bold;">宁夏数字工艺博物馆</span>
        </div>
        <!--      通过handleTabsClick作注册和登录两者的区分-->
        <el-tabs v-model="currentIndex" stretch @tab-click="handleTabsClick">
          <el-tab-pane label="登录" name="login">
            <el-form
                :model="user"
                :rules="rules"
                status-icon ref="loginForm">
              <el-form-item label="用户名" label-width="80px" prop="userName">
                <el-input :prefix-icon="Avatar" placeholder="请输入用户名" v-model="user.userName"/>
              </el-form-item>
              <el-form-item label="密码" label-width="80px" prop="password">
                <el-input :prefix-icon="Lock" placeholder="请输入密码" v-model="user.password" show-password/>
              </el-form-item>
              <el-form-item class="login_button">
                <el-button type="primary" @click="login">登录</el-button>

                <el-button >重置</el-button>

              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="注册" name="register">
            <el-form
                :model="registerForm"
                :rules="rules"
                status-icon ref="registerForm">
              <el-form-item label="用户名" label-width="80px" prop="userName">
                <el-input :prefix-icon="Avatar" placeholder="请输入用户名" v-model="registerForm.userName"/>
              </el-form-item>
              <el-form-item label="邮箱" label-width="80px">
                <el-input placeholder="请输入邮箱" v-model="registerForm.email"/>
              </el-form-item>
              <el-form-item label="电话" label-width="80px" prop="phone">
                <el-input  placeholder="请输入电话号码" v-model="registerForm.phone" show-password/>
              </el-form-item>
              <el-form-item label="密码" label-width="80px" prop="password">
                <el-input :prefix-icon="Lock" placeholder="请输入密码" v-model="registerForm.password" show-password/>
              </el-form-item>
              <el-form-item label="确认密码" label-width="80px" prop="configurePassword">
                <el-input :prefix-icon="Lock" placeholder="请输入密码" v-model="registerForm.configurePassword" show-password/>
              </el-form-item>

              <el-form-item class="login_button">
                <el-button style="text-align: center" type="primary" @click="register">注册</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

        </el-tabs>
      </el-card>
    </div>
  </div>

</template>

<script>
import {Avatar,Lock} from "@element-plus/icons-vue"
import request from "../../../../front_admin/src/utils/request";
import Cookies from 'js-cookie'
export default {

  data() {
    // 验证规则

    var validatePassWord = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validateConfigurePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value !== this.register.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      currentIndex: "login",
      user: {},
      registerForm:{
        email:"",
        password:"",
        userName: "",
        configurePassword:"",
        phone:"",
      },
      Avatar,
      Lock,
      //activeTab作为默认值
      activeTab: "login",
      //rules是起到验证的作用
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在2-10个字符之间', trigger: 'blur'}],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {min: 10, max: 30, message: '长度在10-30个字符之间', trigger: 'blur'}],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 18, message: '长度在3-18个字符之间', trigger: 'blur'}],
        configurePassword: [
          //  还得新增一个判断语句,当password和configurePassword不一样时,报错
          {required: true, message: '请确认密码', trigger: 'blur'},
          {min: 3, max: 18, message: '长度在3-18个字符之间', trigger: 'blur'}],
        phone: [
          //  还得新增一个判断语句,当password和configurePassword不一样时,报错
          {required: true, message: '请确认电话号码', trigger: 'blur'},
          {min: 3, max: 18, message: '长度在3-18个字符之间', trigger: 'blur'}],
      },
    }
  },
  methods: {
    login(){
      this.$refs['loginForm'].validate((valid) => {
        if(valid){
          //验证成功
          // if (this.activeTab === "login") {
            // 登陆
            request.post("/user/login",this.user).then(res => {
              if(res.code == '200'){
                this.$message({
                  type:"success",
                  message:"登录成功"
                })
                //这里的Cookies和后面的{{admin.adminName}}息息相关
                if(res.data != null){
                  Cookies.set('user',JSON.stringify(res.data))
                }
                if(localStorage.getItem('isLogin')===false){
                  this.$router.push("/appointment")
                  localStorage.setItem('isLogin',null)
                }else{
                  this.$router.push("/") //登录成功后进行页面跳转,跳转到主页
                }

              }else{
                this.$message({
                  type:"error",
                  message:res.msg
                })
              }
            })
          // }
        }
      })
    },
    register(){
      if(this.registerForm.email != null){
          this.$refs['registerForm'].validate((valid) => {
            if(valid){
              console.log("里面的内容是",this.registerForm)
              request.post('/user/register',this.registerForm).then(res => {
                if (res.code === '200'){
                  this.$notify.success('注册成功')
                  //  新增成功后resetFields清空输入框内数据
                  this.$refs['registerForm'].resetFields();
                } else{
                  this.$notify.error(res.msg)
                }
              })
            }
          })
        // }
      }

    }
  }
}
</script>

<style scoped lang="less">
.background{
  background-repeat: no-repeat;
  background-image: url("../../assets/img/login_bg.jpg");
  width:100%;
  height: 100vh;
  background-size: 100% 100%;
}
.login_button{
  display: flex;
  justify-content: space-around;
}
.el-card{
  //opacity: 50%;
  background-color: rgba(255,255,255,0.5);
}
.login {
  display: flex;
  width: 600px;
  margin: 0 auto;
  .box-card {
    width: 600px;
    margin: 210px auto;
    //opacity: 50%;
  }
  span{
    color: #9ce3ec;
    font-size: 50px;
    width:500px;
  }
}
</style>